<template>
    <div class="data-info" v-loading="loading">
        <el-table :data="data">
            <el-table-column label="配置名" width="200" prop="option_name"/>
            <el-table-column label="配置值" prop="option_value"/>
            <el-table-column label="操作" width="70">
                <a slot-scope="{ row }" class="blue" @click="save(row)">编辑</a>
            </el-table-column>
        </el-table>
        <page :total="total" :current.sync="params.page" :size.sync="params.size" @change="search"/>
    </div>
</template>

<script>
    import save from './com/save';
    import {configLists} from "@/api";
    import Page from "@/components/page/index";

    export default {
        components: {Page},
        data() {
            return {
                params: {
                    page: 1,
                    size: 10
                },
                total: 0,
                loading: false,
                data: [],
            }
        },
        created() {
            this.search();
        },
        methods: {
            search() {
                this.loading = true;
                configLists(this.params, (res) => {
                    this.loading = false;
                    this.data = res.lists;
                    this.total = parseInt(res.total);
                })
            },
            searchBtn() {
                this.params.page = 1;
                this.search();
            },
            save(obj) {
                let title = '';
                if (obj === null) {
                    title = '添加配置';
                } else {
                    title = '编辑配置';
                }
                this.$drawer({
                    title: title,
                    component: save,
                    data: obj,
                    close: this.search,
                })
            }
        }
    }
</script>
